<template>
  <!-- 导航 -->
  <van-nav-bar
    title="订单中心"
    left-text="返回"
    left-arrow
    @click="this.$router.go(-1)"
  />
  <!-- 主体内容 -->
  <div class="container">
    <!-- 3 商品列表 -->
    <div class="product-list">
      <!-- 标题区域 -->
      <van-cell-group>
        <van-cell :title="cartItemCount" />
      </van-cell-group>
      <!-- 内容区域 -->
      <van-cell-group>
        <!-- 单个商品 -->
        <van-cell
          class="product"
          v-for="(item,index) in orderData"
          :key="index"
          :to="{
            name: 'order-detail',
            params: {
              orderId: index
            }
          }"
        >
          <img :src="item.cartInfo[0].productInfo.image" >
          <div class="info">
            <p class="title" v-text="item.cartInfo[0].productInfo.store_name"></p>
            <p class="price">￥{{ item.cartInfo[0].truePrice }}
              <span class="count">x{{ item.cartInfo[0].cart_num }}</span>
            </p>
            <div class="detail">
              <p class="total">总价:{{ item.total_price }}</p>
              <p class="payType">{{ item._status._payType }}</p>
              <van-button>{{ item._status._title }}</van-button>
            </div>
            
          </div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
  
</template>

<script setup>
import { ref, computed } from '@vue/reactivity'
import { getOrderList } from '@/api/order'

// 存储数据
const orderData = ref([])

// 计算属性处理数据
const cartItemCount = computed(() => `共${orderData.value?.length || 0}件`)
const truePrice = computed(() => (orderData.value?.priceGroup?.truePrice || 0) * 100)

const orderList = async () =>{
  const { data } = await getOrderList()
  if (data.status !== 200) { return }
  console.log(data)
  orderData.value = data.data
}
orderList()

</script>
<style lang="scss" scoped>
.van-nav-bar {
  position: fixed !important;
  width: 100%;
}

.container {
  padding: 50px 0;

  // 地址卡片
  .address-card {
    padding: 20px 25px;
    font-size: 16px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: repeating-linear-gradient(90deg, #ff6c6c 0, #ff6c6c 20%, transparent 20%, transparent 25%, #0084ff 25%, #0084ff 45%, transparent 45%, transparent 50%);
      background-size: 80px;
    }

    .info {
      span:first-child {
        padding-right: 20px;
      }
    }

    .detail {
      padding-top: 5px;

      .default {
        background: #d6251f;
        color: #fff;
        font-size: 12px;
        padding: 2px 3px;
        margin-right: 17px;
        border-radius: 3px;
      }
    }
  }

  // 商品列表
  .product-list {
    :deep(.van-cell__value) {
      display: flex;
      align-items: center;

      img {
        width: 70px;
        height: 70px;
      }

      .info {
        padding-left: 5px;
        width: 100%;

        .title {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          padding: 0 15px 5px 0;
        }
        .price {
          color: #f2270c;

          .count {
            font-size: 12px;
            color: #aaa;
            margin-right: 5px;
          }
        }
        .detail{
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: center;
          -webkit-line-clamp: 1;
          overflow: hidden;
          font-size: 12px;

          .total {
            width: 95px;
          }

          .payType {
            width: 85px;
          }

          .van-button {
            float: right;
            width: 68px;
            height: 26px;
            background-color: #fbc546;
            border-radius: 5px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
